<!-- src/components/home/MerchantCard.vue -->
<template>
  <div class="merchant-card" @click="handleClick">
    <van-card :thumb="merchant.logoUrl || defaultImg" :title="merchant.storeName || '暂无名称'"
      :desc="merchant.description || ''">
      <template #tags>
        <div class="tags-container">
          <!-- 左侧：评分和月售 -->
          <div class="left-info">
            <div class="rating-info">
              <van-icon name="star-o" color="#ff9000" size="14" />
              <span class="rating-score">{{ merchant.overallRating || 4.8 }}分</span>
            </div>
          </div>

          <div class="middle-info">
            <div class="sales-info">
              <span class="sales-text">月售{{ merchant.monthlySales || 700 }}+</span>
            </div>
          </div>

          <!-- 右侧：营业状态 -->
          <div class="right-info">
            <div class="merchant-tags">
              <van-tag plain :type="merchant.businessStatus === 1 ? 'success' : 'danger'">
                {{ merchant.businessStatus === 1 ? '营业中' : '休息中' }}
              </van-tag>
            </div>
          </div>
        </div>

        <div class="merchant-footer">
          <!-- 第二行：好评、收藏 -->
          <div class="info-row">
            <div class="review-info">
              <van-icon name="like-o" color="#f02c00" size="14" />
              <span class="review-text">近期{{ merchant.positiveReviews || 222 }}人好评</span>
            </div>
            <div class="favorites-info">
              <van-icon name="heart-o" color="#ff4081" size="14" />
              <span class="favorites-text">总计{{ merchant.totalFavorites || 1200 }}人收藏</span>
            </div>
          </div>
        </div>
      </template>
    </van-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import type { Merchant } from '@/models/home/index'
import defaultLogo from '@/assets/014yu6gf6sy96b7ghc4ymj3430.jpeg'

interface Props {
  merchant: Merchant
}

const props = defineProps<Props>()

const router = useRouter()
const defaultImg = defaultLogo

// 处理点击事件
const handleClick = () => {
  console.log('点击了商家:', props.merchant)
  router.push(`/merchant/${props.merchant.id}`)
  // 跳转到商家详情页（示例）
  // router.push(`/merchant/${props.merchant.id}`)
}
</script>

<style scoped>
.merchant-card {
  margin-bottom: 10px;
  margin-top: 5px;
  padding: 12px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 点击反馈效果优化 */
.merchant-card:active {
  background-color: #f5f5f5;
  transform: scale(0.99);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-color: #d0d0d0;
}

/* 鼠标悬停效果 */
.merchant-card:hover {
  background-color: #f8f8f8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

/* 其余样式保持不变 */
.van-card {
  background-color: #ffffff;
  padding: 0;
}

.tags-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 5px 0;
}

.left-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.rating-info,
.sales-info,
.review-info,
.favorites-info {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rating-score {
  font-weight: 600;
  color: #ff9000;
  font-size: 14px;
}

.sales-text {
  color: #666;
  font-weight: 500;
}

.middle-info {
  flex: 2;
}

.right-info {
  flex: 1;
  text-align: right;
}

.merchant-footer {
  width: 100%;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0;
  font-size: 12px;
}

.review-text,
.favorites-text {
  color: #666;
}

.van-icon {
  font-size: 14px;
}
</style>